<template>
  <div>
    <div style="text-align: center">
      <el-upload
        ref="upload"
        drag
        :action="uploadUrl"
        :headers="uHeader"
        multiple
        name="picture"
        :limit="1"
        :on-success="handleSuccess"
        :file-list="fileList"
      >
        <i class="el-icon-upload" />
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过10M</div>
      </el-upload>
    </div>
    <el-row :gutter="50">
      <el-col v-for="(picItem,i) in pictures" :key="i" :span="4">
        <el-card class="card-margin-top" style="min-height: 250px;position: relative">
          <el-button type="danger" icon="el-icon-delete" circle style="position: absolute;top: 0;right: 0;z-index: 3" @click="deletePicture(picItem)" />
          <el-image
            style="width: 100%; height: 150px"
            :src="picPrefix+picItem.picture"
            fit="fill"
          />
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline" />
          </div>
          <div>
            <div class="card-margin-top color-red" style="font-size: 12px" @click="toBig(picItem)">
              <span>{{ picItem.picture }}</span>
            </div>
            <div class="card-margin-top color-gray" style="font-size: 12px">
              <span>{{ picItem.create_time }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import { getToken } from '@/utils/auth'
import { DeletePicture } from '@/api/win'

export default {
  name: 'Index',
  props: {
    pictures: {
      type: Array,
      default: () => {
        return []
      }
    },
    picPrefix: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      fileList: [],
      uHeader: {
        Authorization: getToken()
      },
      uploadUrl: ''
    }
  },
  mounted() {
    this.uploadUrl = process.env.VUE_APP_BASE_API + '/win/picture/'
    this.uHeader.Authorization = getToken()
  },
  methods: {
    deletePicture(item) {
      DeletePicture(item).then((res) => {
        this.$emit('refresh')
      })
    },
    toBig(picture) {
      this.$router.push({
        path: '/picture',
        query: {
          picture: JSON.stringify(picture), prefix: this.picPrefix
        }
      })
    },
    handleSuccess() {
      this.$message({
        message: 'Upload Success!',
        type: 'success'
      })
      this.fileList = []
      this.$emit('refresh')
    }
  }
}
</script>

<style scoped>

</style>
